background:
Краткая запись свойств фона
Шорткат, позволяющий задать все свойства фона разом.
background-color:
Цвет фона
При помощи свойства background-color можно задать цвет фона элемента.
background-image :
Картинка на фон
Полезное свойство, если нужно поставить на фон картинку или задать декоративное изображение. Можно даже градиент!
Картинка на фон
Элементу желательно задать одновременно и цвет фона background-color, и фоновую картинку. Если картинка не загрузится, то вместо неё пользователь увидит фоновый цвет.
Несколько фоновых картинок
Фоновых картинок можно задать сколько угодно. Они будут накладываться друг на друга, причём сверху будет та, которая указана в списке первой.
Градиент на фоне
С помощью background-image также можно сделать градиентный фон.
background-position
Позиционирование фоновой картинки
При помощи свойства background-position можно управлять положением фоновой картинки внутри элемента.
background-repeat
Повтор фонового изображения
Свойство background-repeat управляет повтором фонового изображения. По умолчанию значение этого свойства — repeat, то есть фоновая картинка будет повторяться по вертикали и по горизонтали.
background-size: cover;
Размер фонового изображения
Свойство background-size позволяет изменять размер фонового изображения.
background-attachment
Будет ли фон прокручиваться вместе со страницей
Свойство background-attachment определяет будет ли фон прокручиваться вместе со страницей или будет зафиксирован на одном месте. Часто используется для создания так называемого эффекта параллакса.
background-clip
Будет ли фон выходить за границу блока
Свойство background-clip определяет, в каких областях будет находиться фоновая картинка и фоновый цвет блока.
background-origin
Будет ли фон выходить за границу блока
Свойство background-origin определяет какие области блока будет занимать фоновая картинка: все области, включая рамку, внутренний отступ и контент или только контент.
background-blend-mode
Смешивание разных фонов (эффекты инстаграм)
Свойство background-blend-mode даёт возможность смешивать разные фоны между собой.
image-set()
Несколько разрешений и типов фонового изображения.
CSS-функция image-set() позволяет перечислить несколько фоновых изображений с условиями, какое из них наиболее подходящее для загрузки в данный момент.
filter()
backdrop-filter()
backdrop-filter()
Фильтры для картинок и фонов
CSS позволяет накладывать поверх картинок или фонов различные фильтры. Почти как в Инстаграме.
background-color: transparent;
Убрать фон элемента
Иногда некоторые блоки имеют свой фон, по умолчанию который на не нужен при верстке. Примером может служить верстка кнопки при помощи тега button.